<template>
  <div class="page-header-index-wide index-page">
    <IndexHeader title="正大食品能源监测平台"></IndexHeader>
    <div class="current-date">
      <div class="current-date-icon"></div>
      {{ currentDate }}
    </div>
    <a-row type="flex" justify="start" :gutter="40" class="content">
      <a-col :sm="24" :lg="12">
        <div class="content-item">
          <div class="item-title">
            <div class="item-title-icon"></div>
            水表监测数据
          </div>
          <div class="content-chart">
            <img src="../../assets/images/index/u19.svg" class="img" />
            <div class="content-total">
              <p class="total-text">
                累计<span class="total-num yellow">{{ shuiObj.grandTotal }}m³</span>
              </p>
              <p class="total-text">
                上月<span class="total-num green">{{ shuiObj.lastMonth }}m³</span>
              </p>
              <p class="total-text">
                本月<span class="total-num blue">{{ shuiObj.thisMonth }}m³</span>
              </p>
              <p class="total-text">
                昨日<span class="total-num blue">{{ shuiObj.yesterdayNum }}m³</span>
              </p>
            </div>
          </div>
          <div class="content-date">
            <a-select placeholder="请选择设备" v-model="shuiType" @change="shuiChange">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, key) in shuiEquipmentTypes" :key="key" :value="item.id">
                <span style="display: inline-block; width: 100%" :title="item.dmCode">
                  {{ item.dmCode }}
                </span>
              </a-select-option>
            </a-select>
            <!-- <a-select v-model="shuiType" size="small" class="code-mode-select">
              <a-select-option value="1">SB0001</a-select-option>
              <a-select-option value="2">SB0002</a-select-option> -->
            <!-- </a-select> -->
          </div>
        </div>
      </a-col>

      <a-col :sm="24" :lg="12">
        <div class="content-item">
          <div class="item-title">
            <div class="item-title-icon"></div>
            燃气表监测数据
          </div>
          <div class="content-chart">
            <img src="../../assets/images/index/u41.svg" class="img" />
            <div class="content-total">
              <p class="total-text">
                累计<span class="total-num yellow">{{ ranqiObj.grandTotal }}m³</span>
              </p>
              <p class="total-text">
                上月<span class="total-num green">{{ ranqiObj.lastMonth }}m³</span>
              </p>
              <p class="total-text">
                本月<span class="total-num blue">{{ ranqiObj.thisMonth }}m³</span>
              </p>
              <p class="total-text">
                昨日<span class="total-num blue">{{ ranqiObj.yesterdayNum }}m³</span>
              </p>
            </div>
          </div>
          <div class="content-date">
            <a-select placeholder="请选择设备" v-model="ranqiType" @change="ranqiChange">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, key) in ranqiEquipmentTypes" :key="key" :value="item.id">
                <span style="display: inline-block; width: 100%" :title="item.dmCode">
                  {{ item.dmCode }}
                </span>
              </a-select-option>
            </a-select>
            <!-- <a-select v-model="ranqiType" size="small" class="code-mode-select">
              <a-select-option value="1">RQ0001</a-select-option>
              <a-select-option value="2">RQ0002</a-select-option>
            </a-select> -->
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :lg="12">
        <div class="content-item">
          <div class="item-title">
            <div class="item-title-icon"></div>
            电表监测数据
          </div>
          <div class="content-chart">
            <img src="../../assets/images/index/u31.svg" class="img" />
            <div class="content-total">
              <p class="total-text">
                累计<span class="total-num yellow">{{ dianObj.grandTotal }}m³</span>
              </p>
              <p class="total-text">
                上月<span class="total-num green">{{ dianObj.lastMonth }}m³</span>
              </p>
              <p class="total-text">
                本月<span class="total-num blue">{{ dianObj.thisMonth }}m³</span>
              </p>
              <p class="total-text">
                昨日<span class="total-num blue">{{ dianObj.yesterdayNum }}m³</span>
              </p>
            </div>
          </div>
          <div class="content-date">
            <a-select placeholder="请选择设备" v-model="dianType" @change="dianChange">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, key) in dianEquipmentTypes" :key="key" :value="item.id">
                <span style="display: inline-block; width: 100%" :title="item.dmCode">
                  {{ item.dmCode }}
                </span>
              </a-select-option>
            </a-select>
            <!-- <a-select v-model="dianType" size="small" class="code-mode-select">
              <a-select-option value="1">DB0001</a-select-option>
              <a-select-option value="2">DB0002</a-select-option>
            </a-select> -->
          </div>
        </div>
      </a-col>
      <a-col :sm="24" :lg="12">
        <div class="content-item">
          <div class="item-title">
            <div class="item-title-icon"></div>
            蒸汽监测数据
          </div>
          <div class="content-chart">
            <img src="../../assets/images/index/u55.svg" class="img" />
            <div class="content-total">
              <p class="total-text">
                累计<span class="total-num yellow">{{ zhengqiObj.grandTotal }}m³</span>
              </p>
              <p class="total-text">
                上月<span class="total-num green">{{ zhengqiObj.lastMonth }}m³</span>
              </p>
              <p class="total-text">
                本月<span class="total-num blue">{{ zhengqiObj.thisMonth }}m³</span>
              </p>
              <p class="total-text">
                昨日<span class="total-num blue">{{ zhengqiObj.yesterdayNum }}m³</span>
              </p>
            </div>
          </div>
          <div class="content-date">
            <a-select placeholder="请选择设备" v-model="zhengqiType" @change="zhengqiChange">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, key) in zhengqiEquipmentTypes" :key="key" :value="item.id">
                <span style="display: inline-block; width: 100%" :title="item.dmCode">
                  {{ item.dmCode }}
                </span>
              </a-select-option>
            </a-select>
            <!-- <a-select v-model="zhengqiType" size="small" class="code-mode-select">
              <a-select-option value="1">ZQ0001</a-select-option>
              <a-select-option value="2">ZQ0002</a-select-option>
            </a-select> -->
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import LineEchart from '@/components/chart/LineEchart'
import LineEchartxy from '@/components/chart/LineEchartxy'
import BarEchart from '@/components/chart/barEchart'
import CircleEchart from '@/components/chart/CircleEchart'
import PieEchart from '@/components/chart/PieEchart'
import IndexHeader from './IndexHeader'

import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'IndexChart',
  components: {
    IndexHeader,
    LineEchart,
    LineEchartxy,
    BarEchart,
    CircleEchart,
    PieEchart,
    ATooltip,
    ACol,
  },
  data() {
    return {
      shuiType: '', //水下拉选选中项
      dianType: '', //电下拉选选中项
      ranqiType: '', //燃气下拉选选中项
      zhengqiType: '', //蒸汽下拉选选中项
      shuiEquipmentTypes: [], //水下拉选数据源
      dianEquipmentTypes: [], //电下拉选数据源
      ranqiEquipmentTypes: [], //燃气下拉选数据源
      zhengqiEquipmentTypes: [], //蒸汽下拉选数据源
      currentDate: new Date(), //当前时间
      intelvalObj: null, //时间定时器对象
      shuiObj: {}, //水分析汇总
      dianObj: {}, //电分析汇总
      ranqiObj: {}, //燃气分析汇总
      zhengqiObj: {}, //蒸汽分析汇总
    }
  },
  mounted() {
    this.currentDate = this.formatDateTime(new Date())
    this.intelvalObj = setInterval(() => {
      this.currentDate = this.formatDateTime(new Date())
    }, 1000)
    this.getequipmentTypes()
    this.shuiChange('')
    this.dianChange('')
    this.ranqiChange('')
    this.zhengqiChange('')
  },
  methods: {
    // 水下拉选选项改变
    shuiChange(val) {
      getAction('/enerymonitor/queryeEnergymonitor', { id: val, type: 'S' }).then((res) => {
        if (res.success) {
          this.shuiObj = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 电下拉选选择项改变
    dianChange(val) {
      getAction('/enerymonitor/queryeEnergymonitor', { id: val, type: 'DB' }).then((res) => {
        if (res.success) {
          this.dianObj = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 燃气下拉选选择项改变
    ranqiChange(val) {
      getAction('/enerymonitor/queryeEnergymonitor', { id: val, type: 'RQ' }).then((res) => {
        if (res.success) {
          this.ranqiObj = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 蒸汽下拉选选择项改变
    zhengqiChange(val) {
      getAction('/enerymonitor/queryeEnergymonitor', { id: val, type: 'ZQ' }).then((res) => {
        if (res.success) {
          this.zhengqiObj = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 获取设备列表
    getequipmentTypes(value) {
      getAction('/rules/ewRules/queryeQuipmentList').then((res) => {
        if (res.success) {
          console.log('res', res)
          this.shuiEquipmentTypes = res.result.S
          this.dianEquipmentTypes = res.result.DB
          this.ranqiEquipmentTypes = res.result.RQ
          this.zhengqiEquipmentTypes = res.result.ZQ
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 时间格式化
    formatDateTime(date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      minute = minute < 10 ? '0' + minute : minute
      var second = date.getSeconds()
      second = second < 10 ? '0' + second : second
      return y + '年' + m + '月' + d + '日 ' + h + ':' + minute + ':' + second
    },
  },
  beforeDestroy() {
    clearInterval(this.intelvalObj)
    this.intelvalObj = null
  },
}
</script>

<style lang="less" scoped>
.index-page {
  background: url('../../assets/images/index/u1.png') no-repeat;
  background-size: 100% 100%;
  height: 1030px;
  padding: 0 30px;
  position: relative;
  p {
    padding: 0;
    margin: 0;
  }
  .current-date {
    position: absolute;
    top: 80px;
    display: flex;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #ffffff;
    line-height: 29px;
    .current-date-icon {
      width: 29px;
      height: 29px;
      background: url('../../assets/images/index/u7.png') no-repeat;
      background-size: 100% 100%;
      margin-right: 12px;
    }
  }
  .content {
    width: 95%;
    margin: 0 auto !important;
    position: relative;
    top: 10px;
    .content-item {
      height: 357px;
      background: url('../../assets/images/index/u23.png') no-repeat;
      background-size: 100% 100%;
      padding: 20px 13px;
      box-sizing: border-box;
      margin-bottom: 15px;
      .item-title {
        display: flex;
        align-items: center;
        font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        color: #b6d7ff;
        line-height: 28px;
        margin-bottom: 10px;
        .item-title-icon {
          width: 12px;
          height: 14px;
          background: url('../../assets/images/index/u12.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
        }
      }
      .content-chart {
        height: 250px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .img {
          max-width: 325px;
          max-height: 206px;
        }
        .content-total {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .total-text {
            font-size: 14px;
            color: #b6d7ff;
            font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
            font-weight: 400;
            font-style: normal;
            line-height: 28px;
            margin-bottom: 20px;
          }
          .total-num {
            font-size: 28px;
            margin-left: 5px;
          }
          .total-num.yellow {
            color: #d4bb0c;
          }
          .total-num.green {
            color: #03d58b;
          }
          .total-num.blue {
            color: #2db7f5;
          }
        }
      }
      .content-date {
        position: absolute;
        top: 16px;
        right: 30px;
        display: flex;
        /deep/.ant-select {
          margin-right: 27px;
        }
        /deep/.ant-select-selection {
          width: 106px;
          height: 29px;
          background: inherit;
          background-color: rgba(19, 41, 89, 1);
          box-sizing: border-box;
          border: 1px solid rgba(6, 29, 74, 1);
          -moz-box-shadow: none;
          -webkit-box-shadow: none;
          box-shadow: none;
          color: #f0f7ff;
        }
        /deep/.ant-select-arrow {
          color: #fff;
        }
      }
    }
  }
}
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>